/*
用户个人中心路由组件
 */

import React from 'react'
import {Result, List, WhiteSpace, Button, Modal ,NavBar} from 'antd-mobile'
import {connect} from 'react-redux'
import Cookies from 'js-cookie'
import  {resetUser} from '../../redux/actions' // 引入清除用户信息的同步action

const Item = List.Item
const Brief = Item.Brief

class Personal extends React.Component {

  // 退出登录的逻辑
  logout = () => {
  //  使用Modal模态框提示是否确认退出登录
    Modal.alert('退出','确认退出登录吗?',[
      {text: '取消'},
    {text: '确定', onPress:() => {
      // 干掉cookie中的userid
        Cookies.remove('userid')
      //  干掉store中的用户信息
      this.props.resetUser({})
      }}
    ])
  }
  
  
  
  render() {
    // 获取store中的用户信息 根用户信息显示相关信息
    let {type,  header ,username ,post ,info  ,salary } =  this.props.user.data

    return (
      <div>
        <div style={{marginBottom:50, marginTop:50}}>
          
          <Result
            img={<img src={`/images/headers/${header}.png`}   style={{width: 50}} alt="header"/>}
            title={username}
            // message={}
          />
          <List renderHeader={() => '相关信息'}>
            <Item multipleLine>
              <Brief>{type == 'boss'? '招聘者' : '应聘者'}</Brief>
              <Brief>{type == 'boss'? '招聘职位' : '应聘职位'}: {post}</Brief>
              <Brief>个人简介: {info}</Brief>
              {salary ? <Brief>{type == 'boss'? '提供薪资' : '期望薪资'}: {salary}</Brief> : null}
            </Item>
          </List>
          <WhiteSpace/>
          <List>
            <Button type='warning'  onClick={this.logout} >退出登录</Button>
          </List>
        </div>
        
      </div>
    )
  }
}

export default connect(
  state => ({user: state.user}),
  {resetUser}  // 将同步action注入到组件的props中
)(Personal)